<template>
	<view class="index">
		<view class="new_box" style="margin-top: 20upx;">
			<view class="bbox">
				<uni-section title="通栏卡片" type="line" class="list-box" v-for="(item,index) in list" :key="item.course_id">
							<uni-card title="历史浏览信息" :isFull="true" sub-title="计算机与智能教育学院" extra="更多信息" >
								<text>{{item.title}}</text>
								<hr>
								<text class="uni-body">{{item.course}}</text>
							</uni-card>
				</uni-section>
				
				<!-- <view class="list-box" v-for="(item,index) in list" :key="index">
					<view class="list-ed">
						<image class="list-img" :src="item.src" mode="aspectFill"></image>
						<view class="list-right">-->
<!-- 							<view class="list-head" @click="choice(index)">
								<view :class="[item.selected?'selde':'noselde']">{{item.selected?"已关注":"未关注"}}<text :class="[item.selected?'selde-q':'noselde-q']"></text></view>
							</view> -->
<!-- 							<view class="list-name">{{item.title}}</view>
							<view class="list-da">
								<view class="course">简介：<text>{{item.course}}</text></view>
 
							</view>
						</view>
					</view>
				</view> -->
				
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				list: [{
						course_id: "001",
						title: "互联网＋",
						course: "第八届中国国际“互联网+”大学生创新创业大赛是为全面深化高校创新创业教育改革、提升大学生创新创业能力、加快培养创新创业人才,纵深推进大众创业万众创新,",
						selected: true,
						src : "../../static/1.jpeg"
					},
					{
						course_id: "002",
						title: "创新创业大赛",
						course: "创新创业大赛创新创业大赛创新创业大赛创新创业大赛",
						selected: true,
						src:"../../static/2.jpeg"
					},
					{
						course_id: "003",
						title: "献血",
						course: "加分",
						selected: false,
						src:"../../static/3.jpeg"
					},
 
					{
						course_id: "004",
						title: "扫地",
						course: "加分",
						selected: false,
						src:"../../static/2.jpeg"
					},
					{
						course_id: "005",
						title: "讲座",
						course: "计算机与智能教育学院",
						selected: false,
						src:"../../static/2.jpeg"
					},
				],
				selectId:[],
			};
		},
		methods: {
			//选择课程
			choice(index){
				if(this.list[index].selected == true){
					this.list[index].selected = false;
					//取消选中时删除数组中的值
					for(var i = 0; i < this.selectId.length; i++){
					    if(this.selectId[i] === this.list[index].course_id){
					        this.selectId.splice(i,1);
					    }
					}
					console.log("选中的值",this.selectId)
				}else{
					this.list[index].selected = true;
					this.selectId.push(this.list[index].course_id)
					console.log("选中的值",this.selectId)
				}
			},
			//提交
			// sure(){
			// 	//提交选中的值
			// 	if(this.selectId.length==0){
			// 		alert("请选择消息");
			// 		return false;
			// 	}
			// 	var listIds = this.selectId.join(",")
			// 	console.log("提交的数据",listIds)
			// }
		
		}
	};
</script>
 
<style>
	page{
		background-color: #eee;
	}
	/* 已选择 */
	.selde {
		
		border: 1px solid black;
		background: black;
		color: #f0f0f0;
		border-radius: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20upx;
		padding: 0 10upx;
	}
 
	.selde-q {
		
		width: 18upx;
		height: 18upx;
		border-radius: 50%;
		background: #ffffff;
		margin-left: 6upx;
	}
 
	/* 未选择 */
	.noselde {
		
		border: 1px solid #959595;
		background: #FFFFFF;
		color: #959595;
		border-radius: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20upx;
		padding: 0 10upx;
	}
 
	.noselde-q {
		
		border: 1px solid #959595;
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background: #FFFFFF;
		margin-left: 6upx;
	}
	.list-box {
		
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin: 0upx 16upx 16upx 16upx;
		padding: 16upx;
		border-radius: 10upx;
	}
 
	.list-ed {
		font-size: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
 
	.list-left {
		margin-right: 16upx;
	}
 
	.list-img {
		
		width: 160upx;
		height: 160upx;
		margin: 0upx 16upx 0upx 0upx;
	}
	.list-img img {
		width: 100%;
		height: 100%;
	}
	.list-right {
		
		display: flex;
		flex-direction: column;
		width: 510upx;
		height: 180upx;
	}
 
	.list-right-img {
		width: 140upx;
		height: 38upx;
	}
 
	.noadsop {
		width: 120upx;
		height: 32upx;
	}
 
	.list-head {
		
		display: flex;
		justify-content: flex-end;
		margin-bottom: 10upx;
	}
 
	.list-name {
		/* overflow: hidden; */
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 10upx;
	}
 
	.list-da {
		
		display: flex;
		flex-direction: row;
		font-size: 26upx;
	}
 
	.list-da view {
		
		width: 100%;
	}
 
	.list-da view text {
		
		color: f0f0f0;
	}
 
	.sure {
		
		background: #FF6000;
		color: #FFFFFF;
		width: 600upx;
		height: 70upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40upx;
		margin: 60upx auto;
	}
	.course {
		/* overflow: hidden; */
		width: 8em;
		height: 3em;
	}
</style>